<template>
  <div class="add">
    <el-form ref="form" :model="form" label-width="8rem">
      <el-form-item label="姓名">
        <el-input disabled v-model="form.trueName"></el-input>
      </el-form-item>
      <el-form-item label="部门名称">
        <el-select v-model="form.depId" disabled="" placeholder="请选择">
          <el-option
            v-for="item in form.departmentList"
            :key="item.id"
            :label="item.depName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="第一季度">
        <el-input v-model="form.quarter1" onkeyup="value=value.replace(/[^\d]/g,0)"></el-input>
      </el-form-item>
      <el-form-item label="第二季度">
        <el-input v-model="form.quarter2" onkeyup="value=value.replace(/[^\d]/g,0)"></el-input>
      </el-form-item>
      <el-form-item label="第三季度">
        <el-input v-model="form.quarter3" onkeyup="value=value.replace(/[^\d]/g,0)"></el-input>
      </el-form-item>
      <el-form-item label="第四季度">
        <el-input v-model="form.quarter4" onkeyup="value=value.replace(/[^\d]/g,0)"></el-input>
      </el-form-item>
      <el-form-item label="年度">
        {{yrSum}}
        <!--        <el-input v-model="form.yr"></el-input>-->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateData()">确定</el-button>
        <el-button @click="back">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import $ from "@/api/sysuser";
  import department from "../../../../api/department";

  export default {
    data() {
      return {
        id: "",
        value: 0,
        form: {
          quarter1: 0,
          quarter2: 0,
          quarter3: 0,
          quarter4: 0,
          depId: "",
          yr: 0,
          trueName: "",
          departmentList: []
        }
      };
    },
    computed: {
      yrSum() {
        this.form.yr = parseFloat(this.form.quarter1) + parseFloat(this.form.quarter2) + parseFloat(this.form.quarter3) + parseFloat(this.form.quarter4)
        return this.form.yr;
      },
    },
    created() {
      (this.id = this.$route.query.id)
      this.value = this.$route.query.value
      department.getList().then(response => {
        if (response.success) {
          this.form.departmentList = response.data.list;
        }
      });
      var nowDate = new Date();
      // console.log(this.value)
      $.findAim({userId: this.id, time: this.$route.query.value}).then(response => {
        if (response.success) {
          this.form.trueName = response.data.trueName;
          this.form.depId = response.data.depId;
          this.form.quarter1 = response.data.quarter1;
          this.form.quarter2 = response.data.quarter2;
          this.form.quarter3 = response.data.quarter3;
          this.form.quarter4 = response.data.quarter4;
          this.form.yr = response.data.yr;
        }
      });
    },
    methods: {
      updateData() {
        $.updateAim({
          quarter1: this.form.quarter1,
          quarter2: this.form.quarter2,
          quarter3: this.form.quarter3,
          quarter4: this.form.quarter4,
          yr: this.form.yr,
          depId: this.form.depId,
          userId: this.id,
          year: this.$route.query.value
        }).then(response => {
          if (response.success) {
            this.$router.replace({
              path: "index",
              query: {value: this.$route.query.value}
            });
          }
        });
      },
      back() {
        this.$router.replace({
          path: "index",
          query: {value: this.$route.query.value}
        });
      },
    }
  };
</script>
<style scoped>
  .add {
    padding: 1rem;
  }
</style>
